<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

  <title></title>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=8" />
  <link href="styles/default.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="scripts/login.js"></script>
  <script type="text/javascript" src="scripts/validation.js"></script>
  <script type="text/javascript" src="scripts/appsettings.js"></script>
  <script type="text/javascript" src="graphics/popup.js"></script>
  <script type="text/javascript" src="scripts/devicemng.js"></script>
  <script type="text/javascript" src="jsolait/jsolait.js"></script>
  <script type="text/javascript" src="scripts/common.js"></script>

  <!--[if (lte IE 6)|(gte IE 8)]>
  <style type="text/css">
     #outer {height:100%;display:table;}
  </style>
  <![endif]-->

</head>

<body onload="InitDeviceMngPage();">

<div id="outer">
    <div id="inner">
        <div id="header"></div>

        <div id="content">
           	<div id="columnB"></div>

        <!-- START PAGE CONTENT -->
        
	    <div id="columnA">
		<h2>Device Management</h2>
		
		<table><tr><td>
		
    <table width="945px" cellpadding="0" cellspacing="0"> <!-- main table, 3 sections | device format -->
	  <tr valign="top"><td>
		<table cellpadding="0" cellspacing="0" class="containerDiv" width="550px">	
         <tr>
             <td colspan="2" align="left">
                <table width="100%" cellpadding="0" cellspacing="0">
                    <tr>                                
                        <td class="windowHeader" colspan="2" >Gateway</td>
                        <td align="right" class="windowHeader"><a class="white" title="Device formats" href="#" onclick='GetHelp(helpPopup, contentDevice+closeLink, this, "top adjacent-right", 510, 170);return false;'>Help</a>&nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>

		<tr>
			<td class="spacer" colspan="2"></td>
		</tr>				
                
        <tr>
            <td class="labels" align="left" colspan="2">
                <input type="text" id="txtGateway" name="txtGateway" maxlength="73" class="inputText" style="width: 435px" title="Format: &lt;EUI64&gt;,&lt;Key&gt;" />
				<input style="width:73px;" type="button" id="btnSaveGateway" name="btnSaveGateway" value='Save' class="button" onclick="SaveGateway();" onblur="ClearOperationResults()" />				
			</td>
        </tr>
        <tr>
            <td colspan="2" align="center">
              <span id="spnOperationResultGateway"></span>
            </td>
        </tr>
       <tr>
            <td colspan="2" align="left">
                <table width="100%" cellpadding="0" cellspacing="0">
                    <tr>                                
                        <td class="windowHeader" colspan="2">Access Points</td>
                    </tr>
                </table>
            </td>
        </tr>
		<tr>
			<td class="spacer" colspan="2"></td>
		</tr>
		      <tr>
            <td class="labels" align="left" colspan="2">
                <select id="lstAccessPoints" name="lstAccessPoints" size="3" class="inputText" style="width: 531px;" onchange="EditAccessPoint();"> <option /> </select>
            </td>   
        </tr>
        <tr>
            <td class="labels" align="left" colspan="2">
                <input type="text" id="txtAccessPoint" name="txtAccessPoint" maxlength="75" class="inputText" style="width: 525px;" title="Format: &lt;EUI64&gt;,&lt;Key&gt;"/>&nbsp;
            </td>
        </tr>
        <tr>
            <td colspan="2" align="left">
                <table width="100%" cellpadding="0" cellspacing="0">
                    <tr>                                
                        <td colspan="2" align="center">
                        <input type="button" id="btnSaveAccessPoint" name="btnSaveAccessPoint" value="Save" class="button" onclick="SaveAccessPoint();" onblur="ClearOperationResults()"/>
                        <input type="button" id="btnDeleteAccessPoint" name="btnDeleteAccessPoint" value="Delete" class="button" onclick="DeleteAccessPoint();" />
                    </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
              <span id="spnOperationResultAccessPoint"></span>
            </td>
        </tr>
		   <tr>
			 <td colspan="2" align="left">
				<table width="100%" cellpadding="0" cellspacing="0">
					<tr>								
						<td class="windowHeader" colspan="2">Devices</td>
						
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td class="spacer" colspan="2"></td>
		</tr>				
		<tr>
			<td class="labels" >				
				<span id="spnJKActivation">Join Key is </span>			
				<input type="radio" name="rbJoinKey" value="Network" onclick="ChangeJoinKeyMode()">unique per Network</input>
				<input type="radio" name="rbJoinKey" value="Device" onclick="ChangeJoinKeyMode()">per Device</input>													
				<input type="button" id="btnActivateJoinKey" value="Activate" onclick="ActivateJoinKey()"></input>
			</td>
		</tr>
		<tr>
			<td class="labels">
				<span id="spnJoinKey">
					<input type="text" id="txtJoinKey" maxlength="54" class="inputText" style="width: 525px;"/>
				</span>
			</td>
			<tr>
				<td class="spacer"></td>
			</tr>	
		</tr>
		<tr><td>			
		<span id="spnDeviceList">
			<table>
				<tr>
					<td class="labels" align="left" colspan="2">				
						<select id="lstDevices" name="lstDevices" size="6" class="inputText" style="width: 526px;" onchange="EditDevice();"> <option /> </select>
					</td>		
				</tr>
				<tr>
					<td class="labels" align="left" colspan="2">
						<input type="text" id="txtDevice" name="txtDevice" maxlength="95" class="inputText" style="width: 520px;" 
		                title="Format: &lt;EUI64&gt;,&lt;Key&gt;" />&nbsp;
					</td>
				</tr>
				<tr>
					<td colspan="2" align="left">
						<table width="100%" cellpadding="0" cellspacing="0">
							<tr>								
								<td colspan="2" align="center">
								  <input type="button" id="btnSaveDevice" name="btnSaveDevice" value="Save" class="button" onclick="SaveDevice();" onblur="ClearOperationResults()" />
								  <input type="button" id="btnDeleteDevice" name="btnDeleteDevice" value="Delete" class="button" onclick="DeleteDevice();" />
							    </td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</span>
		</td></tr> 
		<tr>
			<td colspan="2" align="center">
		      <span id="spnOperationResultDevice"></span>
            </td>
		</tr>
		 <tr>
			 <td colspan="2" align="left">
				<table width="100%" cellpadding="0" cellspacing="0">
					<tr>								
						<td class="windowHeader">Manage device list</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td colspan="2" align="left">
				<form name="form1" action="/rpc.cgi" enctype="multipart/form-data" method="post" target="iFrame">
   				<table width="100%" cellpadding="0" cellspacing="0" border="0">
				    <tr>
				      <td class="labels">Upload&nbsp;devices&nbsp;<input 
					      type="hidden" name="call1" id="call1"/><input 
						  type="file" id="smFile" name="figure2" value="2" size="40" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; border: solid 1px #000000;" 
                            onkeydown="return false;" onkeypress="return false;" onkeyup="return false;" />
                      </td>
                      <td align="center">
                        <input type="submit" id="btnUpload" value="Upload" class="button" onclick="return Upload();" />
		   		      </td>
				    </tr>
		      		<tr>							
                      <td class="labels">Download&nbsp;devices</td>	
					  <td align="center">
       	              	<input type="submit" id="btnDownload" value="Download" class="button" onclick="Download();" />
					  </td>
					</tr>
					<tr>							
                      <td class="labels">Load the new device list into Network Manager</td>	
					  <td align="center">
						<input type="button" id="btnActivate" value="Activate" class="button" onclick="Activate();" onblur="ClearOperationResults()" />
					  </td>
					</tr>
			        <tr>
			            <td align="center">
			              <span id="spnOperationResultActivate"></span>
			            </td>
			        </tr>
				</table>
                </form>
                <iframe src="about:blank" id="iFrame" name="iFrame" style="display:none;"></iframe>
			  </td>
		    </tr>
		    <tr>
			  <td colspan="2" align="center">
		        <span id="spnOperationResultActivate"></span>
              </td>
		    </tr>
		  </table>
		</td>
  		<td align="left" style="background-color: #F0F0F0;">
    			<div id="divHelp" class="labels" style="display: none; width='100%'; font-size :9px;">
                  <table width="100%">
                    <tr>
                        <td align="right">
                            <a title="Close" href="javascript:ShowHideHelp('close');">Close</a>&nbsp;<br />
                        </td>
                    </tr>
                </table>
                </div>
  			</td>
          </tr>
        </table>    <!-- main table, 3 sections | device format -->
	  </td>
	</tr>
	<tr>
	  <td class="spacer" colspan="2"></td>
    </tr>
  </table>
		
		
	   </div>
		  	
        <!-- END PAGE CONTENT -->

        </div>
    </div>
</div>

<div id="footer"></div>

</body>
</html>
